<template>
	<view class='container bg-w'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="通讯录">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>

		<view class="position-r-top">
			<uni-search-bar :radius="100" @confirm="searchName" v-model="searchKey" placeholder='请输入单位名称、人员姓名'></uni-search-bar>
			<view class="unitList" v-if="unitList.length">
				<uni-collapse :accordion="true" @change="getPersonData">
					<uni-collapse-item v-for="(item,index) in unitList" :key="index" :title="item.orgName" :name="item.orgId"
					 :showAnimation="true">
						<view style="padding: 30rpx;" v-if="!personList||!personList.length">
							暂无人员
						</view>
						<view v-else class="perList height-50 flex flex-between" v-for="(item,index) in personList" :key="index">
							<view class="p-img">
								{{item.personnelName.slice(0,1)}}
							</view>
							<view class="p-name">
								{{item.personnelName}}
							</view>
							<view class="p-duty">
								{{item.postName}}
							</view>
							<view class="p-tel" @click="telHandler(item.phone)">
								{{item.phone}}
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="nodata" v-else>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchPerson,
		getUnitData
	} from "@/common/api/AddressBook.js"
	export default {
		data() {
			return {
				searchKey: '',
				activeName: '',
				personList: [],
				unitList: [],
				pageNo: 1,
				pageSize: 999,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// 获取列表数据
			getData() {
				getUnitData({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orgName: this.searchKey.value
				}).then(res => {
					this.unitList = res.data.records;
					this.searchPersonData(this.searchKey.value)
				})
			},
			getPersonData([orgId]) {
				
				if (orgId == 'search') {
					return this.personList = this.unitList[0].personList
				}
				if (!orgId) return;
				var unit = this.unitList.find((it, i) => it.orgId == orgId)
				orgId = unit.orgId
				searchPerson({
					pageNo: 1,
					pageSize: 999,
					orgId
				}).then(res => {
					unit.personList = res.data.records
					this.personList = res.data.records
				})
			},
			searchPersonData(personnelName) {
				searchPerson({
					pageNo: 1,
					pageSize: 999,
					personnelName
				}).then(res => {
					if (!res.data.records.length || !this.searchKey.value) return;
					this.unitList.unshift({
						orgId: 'search',
						orgName: `“${this.searchKey.value}”搜索相关人员结果`,
						personList: res.data.records
					})
				})
			},
			onPullDownRefresh(){
				this.pageNo = 1;
				this.unitList = [];
				this.getData();
				setTimeout(function () {
						uni.stopPullDownRefresh();
				}, 1000);
			},
			telHandler(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			searchName() {
				this.getData();
			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #F9F9F9;
		display: flex;
		flex-direction: column;
	}

	.main {
		margin-top: 150rpx;
	}

	/deep/.uni-navbar--border[data-v-4afea59e] {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #fff;
	}
	/deep/.uni-collapse-cell{border-color: #F2F2F2;}
	/deep/.uni-collapse-cell--open[data-v-8f47561c] {
		background-color: #fff;
	}

	/deep/.uni-collapse-cell--hide[data-v-8f47561c] {
		height: 50px;
		border-color: #fff;
	}

	.perList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 15px;
	}

	.p-img {
		float: left;
		width: 30px;
		height: 30px;
		margin-right: 10px;
		background-color: #0aabe6;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		font-size: 20px;
		color: #ffffff;
	}

	.p-name {
		float: left;
		text-align: left;
		overflow: hidden;
	}

	.p-duty {
		float: left;
		max-width: 100px;
		overflow: hidden;
	}

	.p-tel {
		float: right;
		color: #0aabe6;
	}
</style>
